---
import type { MarkdownHeading } from 'astro'
import type { CollectionEntry } from 'astro:content'

// Plugin styles
import 'katex/dist/katex.min.css'

import { MediumZoom } from 'astro-pure/advanced'
import { ArticleBottom, Copyright, Hero, TOC } from 'astro-pure/components/pages'
import PageLayout from '@/layouts/ContentLayout.astro'
import { Comment, PageInfo } from '@/components/waline'
import { integ } from '@/site-config'

interface Props {
  post: CollectionEntry<'blog'>
  posts: CollectionEntry<'blog'>[]
  headings: MarkdownHeading[]
  remarkPluginFrontmatter: Record<string, unknown>
}

const {
  post: { id, data },
  posts,
  headings,
  remarkPluginFrontmatter
} = Astro.props

const {
  description,
  heroImage,
  publishDate,
  title,
  updatedDate,
  draft: isDraft,
  comment: enableComment
} = data

const socialImage = heroImage
  ? typeof heroImage.src === 'string'
    ? heroImage.src
    : heroImage.src.src
  : '/images/social-card.png'
const articleDate = updatedDate?.toISOString() ?? publishDate.toISOString()
const primaryColor = data.heroImage?.color ?? 'hsl(var(--primary) / var(--un-text-opacity))'
---

<PageLayout
  meta={{ articleDate, description, ogImage: socialImage, title }}
  highlightColor={primaryColor}
  back='/blog'
>
  {!!headings.length && <TOC {headings} slot='sidebar' />}

  <Hero {data} {remarkPluginFrontmatter} slot='header'>
    <Fragment slot='description'>
      {!isDraft && enableComment && <PageInfo comment class='mt-1' />}
    </Fragment>
  </Hero>

  <slot />

  <Fragment slot='bottom'>
    {/* Copyright */}
    <Copyright {data} />
    {/* Article recommend */}
    <ArticleBottom collections={posts} {id} class='mt-3 sm:mt-6' />
    {/* Comment */}
    {!isDraft && enableComment && <Comment class='mt-3 sm:mt-6' />}
  </Fragment>

  <slot name='bottom-sidebar' slot='bottom-sidebar' />
</PageLayout>

{integ.mediumZoom.enable && <MediumZoom />}
